<template>
    <div class="cash">
      
            <Head class="cash_head" title="确认订单" :left="true"></Head>
   
        
        <div class="sub-child">
             <div v-if="person?false:true" class="address_box" @click="gotoaddress" >
                 <div class="left_box" >
                     <van-icon name="map-marked" size="18"/>
                    <span>您还没有收货地址，请添加</span>
                 </div>
                
                <van-icon name="arrow" size="18"  />
            </div>

            <div v-else class="shouHuoRen" @click="changePerson">
                <h4>收货人:{{person.name}}</h4>
                <h5>电话:{{person.phone}}</h5>
                <p>地址:{{person.province}}{{person.city}}{{person.region}}{{person.detail_addr}}</p>
                <p>邮编:{{person.areaCode}}</p>
            </div>


            <!-- //商品 -->
            <div class="final_goods">
                <van-icon name="bag-o" size="25"/>
              <span>商品</span> 
            </div>
            <div class="goods_one" v-for="(n,m) in goods" :key="m">
                <van-card
                :num="n.count"
                :price="n.cny_price"
                :desc="n.weight +'kg'"
                :title="n.name"
                :thumb="n.image_url"
                />
            </div>

            <div class="sub_list">
                <div class="slitbox">
                    <p>商品小计</p>
                    <p>￥ {{totalMoney}}</p>
                </div>
                 <div class="slitbox">
                    <p>运费</p>
                    <p>￥ 0.00</p>
                </div>
                <div class="slitbox">
                    <p>积分抵用</p>
                    <p>￥ -0.00</p>
                </div>
            </div>
            
        </div>
       





         <!-- 结算 -->
           <div class="cash_foot">
               <div class="fleft">
                   <van-icon name="cart" size="25" @click="gotocart"/>
               </div>
               <div class="fright">
                   <div class="totalmony">
                       <h4>需支付: ￥{{totalMoney}}</h4>
                      
                   </div>
                   <div class="cash_btn" @click="payit">
                       立即支付
                   </div>
               </div>
           </div>

    </div>
</template>


<script>
import { Toast } from 'vant';
export default {
    data(){
        return{
            goods:[],
            person:null,
        }
    },
    methods:{
        gotoaddress(){
            this.$router.push({name:'address'})
        },
        changePerson(){
            this.$router.push({name:'address'})
        },
        payit(){
            if(this.person){
                this.$ajax.payforit().then(res=>{
                    if(res.code==200){
                         Toast.success(res.msg);
                        this.$router.push({name:'cart'})
                    }else{
                        Toast.fail(res.msg);
                    }
                })
            }else{
                Toast.fail('还未选择收货人');
            }
        },
        gotocart(){
             this.$router.push({name:'cart'})
        },
    },
    mounted(){
        this.$ajax.getCartCash({
            mobile:localStorage.getItem('mobile'),
            check:true
        }).then(res=>{
            this.goods=res.result
        })
        if(this.$route.query.name){
                this.$ajax.getOneAddress({
                name:this.$route.query.name,
                mobile:localStorage.getItem('mobile'),
            }).then(res=>{
                this.person=res.result
            })
        }
        
    },
    computed:{
        totalMoney:function(){
            let total = 0;
            
            for(let i = 0;i<this.goods.length;i++){
                if(this.goods[i].check){
                      total += this.goods[i].cny_price*this.goods[i].count
                }
            }
            return total.toFixed(2)
            
        },
    }
}
</script>



<style lang="scss" scoped>
.shouHuoRen{
    background-color: #fff;
    padding: 13px;
    margin-top: 12px;
     h4{
            font-weight: bold;
            font-size: 15px;

        }
        h5{
            font-size: 14px;
            padding-top: 5px;
        }
        p{
            font-size: 13px;
        }
}
.cash{
    padding-bottom: 67px;
}
.sub_list{
    width: 100%;
    margin-top: 12px;
    background-color: #fff;
    .slitbox{
        display: flex;
        justify-content: space-between;
        padding: 12px;
        font-size: 14px;
    }
}
.final_goods{
    background-color:#fff;
    margin-top: 12px;
    padding: 12px;
    font-size: 17px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(228, 220, 220);
    span{
        padding-left: 12px;
        
    }
}
    .address_box{
        margin-top: 12px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 12px;
        align-items: center;
        .left_box{
            font-size: 16px;
            span{
                padding-left: 12px;
            }
        }

    }
   
    .cash_foot{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    
    .fleft{
        display: flex;
        width: 25%;
        font-size: 17px;
        font-weight: normal;
        align-items: center;
        padding-left: 12px;
        box-sizing: border-box;
        .all_choose{
            padding: 0 8px;
            width: 30%;
        }
        span{
            padding-left: 5px;
        }

    }
    .fright{
        flex: 1;
        display: flex;
        .cash_btn{
            width: 22%;
            padding: 0 13px;
            text-align: center;
            background-color: #333;
            color: white;
            font-size: 15px;
            line-height: 41px;
            line-height: 50px;
        }
        .totalmony{
            flex: 1;
            text-align: right;
            padding: 0 13px 0 0;
            h4{
                font-size: 17px;
                line-height: 50px;
            }
           
        }

    }
}
</style>